<div class="ui-widget ui-widget-content ui-corner-all" id="list">
    <table class="sortable" data-bind="triggerUpdate: words">
        <caption>All Words</caption>
        <thead>
            <tr>
                <th></th>
                <th class="ui-widget-header ui-corner-all">Spelling</th>
                <th class="ui-widget-header ui-corner-all">Transcription</th>
                <th class="ui-widget-header ui-corner-all">Translations</th>
                <th class="unimportant ui-widget-header ui-corner-all">Created At</th>
                <th class="unimportant ui-widget-header ui-corner-all">Score</th>
            </tr>
        </thead>
        <tbody data-bind='template: { name: "wordTemplate", foreach: words, afterRender: afterRender }'></tbody>
    </table>
    <p data-bind="visible: words().length < 1">
        You haven't added any words yet. Please, click "Add word" button in order to add some words.
    </p>
</div>
        
<script type="text/html" id="wordTemplate">
    <tr>
        <td class="controls">
            <a class="button" data-bind="lingvo: spelling" target="_blank">
                <img class="button" src="lingvo.png" alt="Open Lingvo Pro Online" />
            </a>
            <a class="button" href="/js" data-bind="click: function (event) { viewModel.openEditor(event, $data); }">
                <img class="button" src="edit.png" alt="Edit" />
            </a>
        </td>
        <td><a data-bind="lingvo: spelling, text: spelling" target="_blank"></a></td>
        <td data-bind="text: transcription"></td>
        <td data-bind="commaSeparated: translations"></td>
        <td class="unimportant" data-bind="text: '{0:dt}'.format(createdAt())"></td>
        <td class="unimportant" data-bind="text: score"></td>
    </tr>
</script>